<template>
  <div class="home">
    <p>{{ formData.username }}</p>
    <p>
      用户名:
      <input type="text" v-model="formData.username">
    </p>
    <p>
      爱好:
      <input type="checkbox" v-model="formData.hobbies" value="读书">读书
      <input type="checkbox" v-model="formData.hobbies" value="练字">练字
      <input type="checkbox" v-model="formData.hobbies" value="敲代码">敲代码
    </p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

let formData = reactive({
  username: '',
  // hobbies: ['读书']
  hobbies: ['读书', '练字']
});
console.log(formData);

</script>
